Amplify Framework UIコンポーネントの既存Angularプロジェクトへの埋め込みを考える
こんにちは！DA(データアナリティクス)事業本部 インテグレーション部の大高です。
先日、試してみたAmplify FrameworkのUIコンポーネントについて、実際のAngularプロジェクトでの使い方を考えてみました。
今回、既存のAngularプロジェクトが既に存在しており、そのプロジェクトに対して認証を設けたいと考えた場合、いくつか検討すべき事項があったのでまとめてみます。
検討事項１：どこにamplify-authenticatorを埋め込むか
先日試した際には、公式のドキュメントにあるサンプルコードと同じく、以下のようにapp.component.htmlにamplify-authenticatorを埋め込みました。
<amplify-authenticator>
<div>
My App
<amplify-sign-out></amplify-sign-out>
</div>
</amplify-authenticator>
これにより、amplify-authenticatorの内部のDOM要素は認証を行わないと表示されないようになり、認証を済ませると表示される、という動きになりました。
動きとしては良いのですが、これを既存のAngularプロジェクトに埋め込みたい時にはちょっと検討が必要そうです。
既存プロジェクトではroutingを利用しているので、app.component.htmlのコードは以下になります。
<router-outlet></router-outlet>
お馴染みのrouter-outletです。また、app-routing.module.tsはこんな感じです。
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'home', component: HomeComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
コンポーネントとして、HomeComponentを利用しており、アクセスすると単純にこのコンポーネントを表示しています。
これに対して認証を掛けていきたいと思います。
amplify-authenticatorで括ってみる
単純にrouter-outletをamplify-authenticatorで括ってみます。
<amplify-authenticator> <router-outlet></router-outlet> </amplify-authenticator>
この状態で、起動してみましたが画面遷移としては特に問題ありませんでした。
https://localhost:4200/や、https://localhost:4200/homeにアクセスするとログイン画面が出ますし、ログイン後は想定通りのroutingがされています。
後は必要な箇所にamplify-sign-outでサインアウトボタンを配置してあげれば問題ないですね。
検討事項２：ログイン画面の配置
特に何も考えずに下記のようにすると、ログイン画面は左上に配置されます。
<amplify-authenticator> <router-outlet></router-outlet> </amplify-authenticator>
ちょっとイケてないので、配置を直してみます。
<div class="authenticator">
<amplify-authenticator>
<router-outlet></router-outlet>
</amplify-authenticator>
</div>
div.authenticator {
margin-top: 50px;
text-align: center;
}
こんな感じに直すと、以下のようにそれっぽいログイン画面の位置になります。なお、amplify-authenticatorにclass指定でも良いかなと思いましたが、margin-topが効かないのでdivを利用しました。
ログイン後のhome.component.htmlと画面はこんな感じです。簡略化のため、home.component.scssは利用していません。
<div style="width: 300px"> I'm home. <amplify-sign-out></amplify-sign-out> </div>
当然ですが、こちらのコンポーネントもログイン画面でのmargin-topとtext-alignが効いていますね。ちょっと困るので、app.component側を修正します。
<div class="authenticator">
<amplify-authenticator>
<div class="authenticated-container">
<router-outlet></router-outlet>
</div>
</amplify-authenticator>
</div>
div.authenticator {
margin-top: 50px;
text-align: center;
}
div.authenticated-container {
margin-top: -45px;
text-align: initial;
}
すると、ログイン後の画面は以下のようになります。
良さそうです。all: initialでも良いかなと思いましたが、margin-topの相殺も消えてしまうのでtext-align: initialにしました。
まとめ
以上、Amplify Framework UIコンポーネントの既存Angularプロジェクトへの埋め込みを試してみました。これで、既存Angularプロジェクトにもうまく組み込めそうです。また、CSSは得意ではないので、より良い書き方があれば教えて頂けると喜びます！
どなたかのお役に立てば幸いです。それでは！
